import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import SDUtils from 'sudao-utils'

import CartIcon from '../../images/ic_shopping_cart_small.png'

import './index.less'

type IGoodsItemProps = {
  width: number,
  height: number,
  imgUrl: string,
  title: string,
  price: string,
  tagPrice: string,
  showTagPrice: boolean,
  showCartNum: boolean,
  cartNum: number | string,
  salesVolume: number | string,
  showSalesVolume: boolean,
  showCartIcon: boolean,
  bgColor: string,
  type: 'recommend' | 'normal',
  extData: any,
  onClick?: (extData: any) => any,
  onCartClick?: (extData: any, e: any) => any
}

export default class GoodsItem extends Component<IGoodsItemProps, {}> {

  static defaultProps = {
    tagPrice: '',
    showTagPrice: false,
    cartNum: 0,
    showCartNum: false,
    showCartIcon: false,
    bgColor: '#fff',
    type: 'normal',
    salesVolume: 0,
    showSalesVolume: false,
    extData: {}
  }

  static externalClasses = ['sd-class']

  render () {
    const { width, height, imgUrl = '', title, price, bgColor, showTagPrice, tagPrice, showSalesVolume, salesVolume, showCartIcon, showCartNum, cartNum, type } = this.props
    return (
      <View className='cell-item sd-class' style={`width:${width}rpx; height:${height}rpx; background-color:${bgColor};`} onClick={this.onCellTaped}>
        <View style={`width:${width}rpx; height:${width}rpx;`} className='img-content'>
          <Image src={SDUtils.processImageURL(imgUrl, 435)} className='img-icon' lazyLoad mode='aspectFill' />
          {
            showCartNum ? (
              <View className="cart-num-content">
                <View className="title">{cartNum}</View>
              </View>
            ) : null
          }
        </View>
        <View className='cell-title'>{title}</View>
        {
          type == 'normal' ? (
            <View className="normal-content">
              <View className='cell-price'>{price}</View>
              {
                showTagPrice ? <View className="cell-tag-price">吊牌价：{tagPrice}</View> : null
              }
              {
                showSalesVolume ? <View className="sales-volume">销量：{salesVolume}</View> : null
              }
              {
                showCartIcon ? (
                  <View className="cart-content" onClick={this.onCartIconTaped}>
                    <Image className="cart-icon" src={CartIcon}></Image>
                  </View>) : null
              }
            </View>
          ) : (
            <View className="recommend-content">
              <View className="recommend-center">
                <View className="price">{price}</View>
                <View className="sales-volume">销量：{salesVolume}</View>
              </View>
              <View className="tag-price">吊牌价：{tagPrice}</View>
            </View>
          )
        }
      </View>
    )
  }

  onCellTaped = () => {
    this.props.onClick && this.props.onClick(this.props.extData)
  }

  onCartIconTaped = e => {
    e.stopPropagation()
    this.props.onCartClick && this.props.onCartClick(this.props.extData, e)
  }
}
